import React, { Component } from 'react'
import {observer,inject} from 'mobx-react'

@inject("todoList")
@observer
class DoList extends Component {
    constructor(props) {
        super(props);
    }
    
    addOne=()=>{
        let val = document.getElementById('titledo').value;
        this.props.todoList.addOne(val);
    }
    addTen=()=>{
        let val = document.getElementById('titledo').value;
        this.props.todoList.addTen(val);
    }
    
    delOne=((index)=>{
        console.log(index);
        this.props.todoList.mydelOne(index);
    })

    render() {
        return (
            <div>
                <div>
                  <input type="text" id="titledo" />
                  <button onClick={this.addOne}>添加1个</button>
                  <button onClick={this.addTen}>添加10个</button>
                </div>
                <div>
                   <ul>
                       <li>items:{this.props.todoList.mylenght}</li>
                       {
                           this.props.todoList.getmylist.map((item,index)=>{
                              return <li key={index}>{item}----<button onClick={this.delOne(index)}>删除</button></li>
                           })
                       }
                   </ul>
                </div>
            </div>
        )
    }
}export default DoList
